<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>注册</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        html {
            background: #f5f5f5;
        }
        
        a {
            text-decoration: none;
            color: #e8380d;
        }
        
        .box {
            width: 850px;
            background: #fff;
            margin: 60px auto 40px;
            text-align: center;
            padding: 50px 0;
        }
        
        .sign {
            height: 60px;
            overflow: hidden;
        }
        
        button {
            border: none;
            background: #fff;
            outline: none;
            cursor: pointer;
        }
        
        input {
            outline: none;
            border: 1px solid #eee;
            padding: 0 10px;
        }
        
        .type,
        .login {
            color: #e8380d;
        }
        
        .account input {
            width: 340px;
            height: 50px;
            margin: 10px auto;
        }
        
        .verify {
            width: 360px;
            margin: 0 auto;
            display: flex;
        }
        
        .verify input {
            width: 300px;
            height: 50px;
        }
        
        .verify .getCode {
            border: 1px solid #eee;
            width: 90px;
            height: 52px;
        }
        
        .agreement {
            width: 360px;
            height: 20px;
            margin: 0 auto;
            text-align: left;
            color: #cccccc;
        }
        
        .login1 {
            width: 360px;
            height: 50px;
            margin: 10px auto;
            background: #e8380d;
        }
        
        .submit {
            background: #e8380d;
            color: #fff;
            font-size: 20px;
            line-height: 50px;
        }
        
        .enroll {
            width: 360px;
            margin: 10px auto;
            text-align: right;
        }
        
        .enroll span {
            font-size: 14px;
        }
        
        p {
            text-align: center;
            color: #cccccc;
            position: relative;
            margin: 30px 0 50px;
        }
        
        p img {
            width: 16px;
            position: absolute;
        }
        
        p span {
            margin-left: 24px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="sign"><img src="../project 2/img/to.png" alt=""></div>
        <div class="account">
            <input type="text" placeholder="请输入手机号" id="username"><br>
            <input type="password" placeholder="密码为8-16个字符（数字、大小写字母、符号至少含三种）" id="password"><br>
        </div>
        <div class="verify">
            <input type="text" placeholder="请输入手机收到的验证码" id="code">
            <button class="getCode">获取验证码</button>
        </div>
        <div class="agreement">
            <input type="checkbox" id="allow"> 我已同意接受
            <span>用户协议</span>和
            <span>隐私政策</span>
        </div>
        <div class="login1">
            <button class="submit">提交</button>
        </div>
        <div class="enroll">
            <span>已有账号，</span>
            <button class="login"><a href="login.html">直接登录</a></button>
        </div>
    </div>
    <p> ©2014 - 2020 深圳市中兴智谷科技有限公司版权所有，并保留所有权利 &nbsp;<img src="../project 2/img/govIcon.gif" alt=""> <span>服务协议 |隐私政策|</span></p>
    <script src="jquery.min.js"></script>
    <!-- <script src="./netaddress.js"> -->
    </script>

    <script>
        let oSpan1 = document.querySelector("#username");
        let oSpan2 = document.querySelector("#password");
        let oSpan3 = document.querySelector("#getCode");

        var flagTel = false;
        var flagPwd = false;
        var flagPwd2 = false;

        oSpan1.onblur = function() {
                var oTel = /^1(3|5|8|7)\d{9}$/;
                if (oTel.test(oSpan1.value)) {
                    oSpan1.style.border = "1px solid green"
                    flagTel = true;
                } else {
                    oSpan1.style.border = "1px solid red"
                    flagTel = false;
                }
            }
            //密码
        oSpan2.onblur = function() {
                var oMi = /^[a-zA-Z0-9]{1,8}$/;
                if (oMi.test(oSpan2.value)) {
                    oSpan2.style.border = "1px solid green"
                    flagPwd = true;
                } else {
                    oSpan2.style.border = "1px solid red"
                    flagPwd = false;
                    oRemima.style.display = "block";
                    oRemima.style.color = "red";
                }
            }
            //确认密码
        oSpan3.onblur = function() {

                if (oSpan3.value == oInput[5].value) {
                    oSpan3.style.border = "1px solid green"
                    flagPwd2 = true;
                } else {
                    oSpan3.style.border = "1px solid red"
                    flagPwd2 = false;
                }
            }
            // 检验
        $(function() {

                    $(".createId").click(function() {
                        if (flagName & flagPwd & flagPwd2) {
                            $.ajax({
                                url: "../php/register.php",
                                type: "post",
                                data: "userName=" + $("#userName").val() + "&userPwd=" + $("#getCode").val(),
                                success: function(resText) {
                                    console.log(resText);

                                    if (resText == "注册成功") {
                                        $(window).attr('location', 'login.html');
                                        // $(location).prop('href', 'login.html');
                                    }
                                }
                            });

                        }
                    });


                    // })

                    //按下回车事件
                    window.onkeydown = function(event) {
                        if (event.keyCode === 13) {
                            $(".submit").click()
                        }
                    }

                    //获取验证码

                    $(".getCode").click(function() {
                        let num = "";
                        for (let i = 0; i < 6; i++) {
                            let num1 = parseInt(Math.random() * 10);
                            num += num1
                        }
                        $("#code").val(num)
                    })
    </script>
</body>

</html>